<template>
	<view>
		<view class="box">

			<view class="nns">

				<view class="mm" >
					<p>身份证：</p>
					<image @click="choosePhoto(3)" :src="list[3].img" mode=""></image>
				</view>

				<view class="mm">
					<p>驾驶证：</p>
					<image @click="choosePhoto(4)" :src="list[4].img" mode=""></image>
				</view>

				<view class="mm">
					<p>行驶证：</p>
					<image @click="choosePhoto(0)" :src="list[0].img" mode=""></image>
				</view>

				<view class="mm">
					<p>运营证：</p>
					<image @click="choosePhoto(2)"  :src="list[2].img" mode=""></image>
				</view>

				<view class="mm">
					<p>上岗证：</p>
					<image @click="choosePhoto(1)" :src="list[1].img" mode=""></image>
				</view>


			</view>
			<p style="clear: both;" @click="showHiheCarNumber(true)" >
				<view style="font-size: 18px;font-weight: 600;">车牌号：</view>
				<input v-model="car_plate" placeholder="请输入车牌号" disabled type="text">
			</p>

			<p style="clear: both;" >
				<view style="font-size: 18px;font-weight: 600;">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
				<input v-model="name" placeholder="请输入姓名" type="text">
			</p>
			<p style="clear: both;">
				<view style="font-size: 18px;font-weight: 600;">手机号：</view>
				<input v-model="mobile" placeholder="请输入手机号" type="number" maxlength="11">
			</p>

			
			<button @click="save()">提交</button>
			<view class="tc" v-if="isShowCarNumber">
				<view class="tc-box">
					<p class="tc-box-p" >填写车牌号</p>
					<p class="tc-box-p">
						<view class="number-input-box">
							<car-number-input @numberInputResult="numberInputResult" :defaultStr="car_plate"  ></car-number-input>
						</view>
					</p>
					<view class="car-btn-box">
						<view class="car-btn"  @click="showHiheCarNumber(false)">取消</view>
						<view class="car-btn"  @click="showHiheCarNumber(false)">确定</view>
					</view>
						
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	 
	export default {
		data() {
			return {
				addImg:"../../../static/add.png",
				
				share_receiving_data:null,
				type: 1, //类型 1老板填写 2司机填写
				car_plate: "", //车牌号
				share_id: "", //分享的id
				estimate: "", //预计到达时间
				mobile: "", //手机号
				list:[
					{
						name:"行驶证",
						img:"../../../static/add.png",
						imgs:""						
					},
					{
						name:"上岗证",
						img:"../../../static/add.png",
						imgs:""						
					},
					{
						name:"运营证",
						img:"../../../static/add.png",
						imgs:""						
					},
					{
						name:"身份证",
						img:"../../../static/add.png",
						imgs:""						
					},
					{
						name:"驾驶证",
						img:"../../../static/add.png",
						imgs:""						
					}
				],
				name: "" ,//驾驶员姓名
				bond:"",//保证金
				isShowCarNumber: false,
				defaultNum: ''
			}
		},
		onLoad(x) {
			console.log(x);
			 
		},
		methods: {
			
			choosePhoto(x) {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['album'], 
					sizeType: ['original'],
					success(res) {
						console.log('选择图片完成', res)
						for(let i =0;i<_this.list.length;i++)
						{
							if(x==i)
							{
								_this.list[i].img=res.tempFilePaths[0]; 
							}
						}
						_this.uploadImg(x);
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},

			// 提交信息
			uploadImg(i) {
				const _this = this;
				uni.showLoading({title:"上传中"})
				this.$rqt.uploadPhoto(_this.list[i].img,(res)=>{
					uni.hideLoading();
					let {data} = res;
					let res_data = JSON.parse(data);
					let imgData = res_data.data;
					let {fullurl} = imgData;
					_this.list[i].img = fullurl; 
				},(res)=>{
					console.log(res);
				}) 
				
			},
			//提交
			save()
			{
				const _this = this;
				let data = {
					car_plate:this.car_plate,
					mobile:this.mobile, 
					license_img: _this.list[0].img, 
					work_img:_this.list[1].img, 
					operate_img:_this.list[2].img, 
					card_img:_this.list[3].img, 
					drive_img:_this.list[4].img, 
					name: this.name 
				}
				if (data.car_plate == "") {
					uni.showToast({title: '请填写车牌号',icon: "error"});
					return;
				}
				if (data.name == "") {
					uni.showToast({title: '请填写姓名',icon: "error"});
					return;
				}
				if (data.mobile == "") {
					uni.showToast({title: '请填写手机',icon: "error"});
					return;
				}
				if (data.license_img == "" || data.card_img == "") {
					uni.showToast({title: '请上传资料',icon: "error"});
					return;
				}
				
				this.$rqt.userCarAdd(data).then(res => {
					let {msg} = res;
					uni.showToast({
						title: msg
					})
					setTimeout(()=>{
						uni.navigateBack();
					},850);
				})
			},
			 
			showHiheCarNumber(e){
				this.isShowCarNumber = e;
			},
			numberInputResult(e) {
				// 去除空格
				e = e.replace(/\s*/g,"");
				this.car_plate = e;
			},
		}
	}
</script>

<style scoped>
	button {
		margin: 0 auto;
		width: 86%;
		height: 50px;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 10px;
		margin-bottom: 30px;
	}

	.nns {
		width: 90%;
		margin: 0 auto;
	}

	.mm {
		width: 50%;
		float: left;
		margin-top: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 50px;
	}

	.mm>p {
		font-size: 18px;
		font-weight: 600;
	}

	.mm>image {
		width: 80px;
		height: 80px;
		margin-top: 10px;
	}

	.box>p {
		display: flex;
		line-height: 50px;
		width: 90%;
		margin: 0 auto;
	}

	.box>p>input {
		width: 70%;
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
	}

	.box>h3 {
		text-align: center;
		margin-top: 25px;
	}
	.number-input-box {
		line-height: 60px;
		
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		color: #686870;
	}
	
	.tc-box-p {
		font-size: 22px;
		font-weight: 500;
		color: #333539;
		text-align: center;
	}
	
	.tc-box>p>view {
		/* width: 80%;
		margin: 0 auto;
		margin-top: 30px;
		display: flex;
		justify-content: space-around; */
	}
	
	.tc-box>p>view>input {
		width: 28px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #CCCCCC;
	}
	
	.tc-box {
		padding-top: 10rpx;
		width: 343px;
		height: 230px;
		background: #FFFFFF;
		border-radius: 18px;
		margin: 0 auto;
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.tc {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 999;
	}
	.car-btn-box {
		display: flex;
	    justify-content: space-around;
		border-top: 1px solid #EAEAF0;
		padding-top: 20rpx;
	}
	.car-btn{
		 
	}
</style>
